<template>
    <div class="xiaomi">
      <Header></Header>
      <!-- 商品模块 -->
      <div class="row">
        <!-- 左侧 -->
        <div class="span1">
          <img src="@/assets/images/phone/1.png" alt="" />
        </div>

        <ul class="brick-list clearfix">
          <li class="lili" v-for="(product, index) in products" :key="index">
            <a href="#">
              <div class="figure-img">  
                <img
                  :src="require('@/assets/images/phone/' + product.image)"
                  alt="Product Image"
                />
              </div>
              <h3>{{ product.name }}</h3>
              <p>{{ product.description }}</p>
              <span>{{ product.price }}</span>
            </a>
          </li>
        </ul>
      </div>

    </div>
  </template>
    
  <script>

  let phone = require("@/assets/data/phone.json");
  export default {

    name: "XiaomiPhone",
    data() {
      return {
        products: phone.products,
      };
    },
  
  };
  </script>
  
  <style scoped>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .xiaomi {
    margin: 10px auto;
    width: 1240px;
  }
  
  /* 商品模块 */
  .row {
    margin: auto;
    height: 628px;
    width: 1240px;
  }
  
  .row .span1 {
    margin-left: 5px;
    float: left;
    width: 234px;
    height: 628px;
  }
  
  .span1 img {
    width: 234px;
    height: 614px;
  }
  
  .span1:hover {
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.1);
  }
  
  .brick-list {
    background-color: rgb(245, 245, 245);
    float: right;
    width: 992px;
    height: 614px;
  }
  
  .brick-list li {
    background-color: #fff;
    float: left;
    margin-bottom: 14px;
    margin-left: 14px;
    width: 234px;
    height: 300px;
  }
  
  .brick-list > li:hover {
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.1);
  }
  
  .lili > a {
    text-align: center;
    background-color: #fff;
    display: block;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 0;
  }
  
  .lili a > h3 {
    color: #333;
    margin: 0 10px 2px;
  }
  
  .lili a > p {
    width: 214px;
    height: 18px;
    margin: 0 10px 10px;
    height: 18px;
    font-size: 12px;
    color: #b0b0b0;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  
  .figure-img img {
    width: 160px;
    height: 160px;
  }
  
  .lili a > span {
    color: #ff6700;
  }
  </style>